<template>
	<view>
		<view class="col-p">
			<rich-text :nodes="mHtml"></rich-text>
		</view>
		<view class="col-p">
			<view class="col-mb">请点击下面的方框签名</view>
			<view class="col-mb signature-box" @tap="toSignature">
				<image :src="signatureImg" class="signature-img"></image>
			</view>
			<button type="primary" class="btn" @tap="doSubmit">提交</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		showToast,
		navigateTo,
		uploadFile,
		imageCompression,
		getDateTime,
		showLoading
	} from "@/utils/modal.js"
	import {
		getSignAgreement,
		doUserSign
	} from "@/api/index.js"
	import { useCounterStore } from '@/stores/index'
	const counterStore = useCounterStore()
	const mHtml = ref('')
	const signatureImg = ref('')
	const init = async () => {
		let data = await getSignAgreement({
			mch_id: counterStore.mchId,
			user_id: counterStore.userId
		})
		let content = data.mhtml
		let formData = counterStore.formData
		let signImg = 'https://hmzf.yuemandata.com/Public/file/null.png'
		let mhtml = content.replace(/{用户姓名}/g, formData.name).replace(/{用户身份证号码}/g, formData.id_no).replace(/{用户手机号}/g, formData.mobile).replace(/{当前日期}/g, getDateTime(new Date(), 'y-m-d')).replace(/{SIGNING_IMG}/g, signImg)
		mHtml.value = mhtml
	}
	const toSignature = () => {
		navigateTo('/pages/index/signature')
	}
	const doSubmit = async () =>{
		if (!signatureImg.value) return showToast('请先签名')
		// 上传签名
		let data = await uploadFile(signatureImg.value, {
			mch_id: counterStore.mchId,
			ocr_type: -1
		})
		// 用户签约
		let formData = Object.assign({}, counterStore.formData, {
			mch_id: counterStore.mchId,
			user_id: counterStore.userId,
			electronic_signature_code: data.file_code
		});
		showLoading('提交中')
		await doUserSign(formData)
		uni.hideLoading()
		navigateTo('/pages/index/result')
	}
	onLoad((options) => {
		init()
	})
	onShow(() => {
		let signPath = uni.getStorageSync('signPath')
		if (signPath) signatureImg.value = signPath
	})
</script>

<style>
.signature-box{
	border: 1px dashed #dcdee0;
	height: 300rpx;
}
.signature-img{
	width: 100%;
	height: 100%;
}
</style>
